<template>
  <view class="container p-b-80">
    <view class="m-b-40 fill-base p-24">
      <u-tabs
        lineWidth="0"
        :scrollable="true"
        :activeStyle="{
          color: '#fff',
          background: '#00D075',
          borderRadius: '50rpx',
          padding: '6rpx 24rpx',
          fontSize: '28rpx',
        }"
        :inactiveStyle="{
          color: '#1C274C',
          padding: '6rpx 24rpx',
          fontSize: '28rpx',
        }"
        itemStyle="padding-left: 0px; padding-right: 6px;  "
        :current="statusIndex"
        :list="statusList"
        @click="ontabtap"
      ></u-tabs>
    </view>

    <scroll-view
      class="order-list"
      scroll-y="true"
      @scrolltolower="loadMoreOrders"
      v-if="orderList.length > 0"
    >
      <view
        class="order boxPanel"
        v-for="item in orderList"
        :key="item.order_id"
        v-if="statusIndex !== 4"
      >
        <view class="head flex-x-between" @click="goDetail(item.order_id)">
          <view class="flex-y-center">
            <u-tag
              text="快递"
              plain
              size="mini"
              bgColor="#00D075"
              borderColor="#00D075"
              color="#fff"
              v-if="item.promotion_type !== 'pintuan'"
            ></u-tag>
            <u-tag
              text="团购"
              plain
              size="mini"
              bgColor="#FF2D14"
              borderColor="#FF2D14"
              color="#fff"
              v-else
            ></u-tag>
            <view class="c-60 m-l-10">订单编号:{{ item.order_no }}</view>
          </view>
          <block v-if="item.promotion_type !== 'pintuan'">
            <view class="color-title2" v-if="item.order_status == 0">{{
              item.order_status_name
            }}</view>
            <view
              class=""
              style="color: #fe6a00"
              v-else-if="item.order_status == 1"
              >{{ item.order_status_name }}</view
            >
            <view
              class=""
              style="color: #00c28b"
              v-else-if="item.order_status == 3"
              >{{ item.order_status_name }}</view
            >
            <view class="c-8d" v-else>{{ item.order_status_name }}</view>
          </block>
          <block v-else>
            <text class="color-title2" v-if="item.order_status == 0">{{
              item.order_status_name
            }}</text>
            <view class="c-8d" v-else-if="item.order_status == -1">{{
              item.order_status_name
            }}</view>
            <text class="" style="color: #ff8f33" v-else>{{
              item.promotion_status_name
            }}</text>
          </block>
        </view>
        <view
          class="order_info"
          v-for="goods in item.order_goods"
          :key="goods.order_goods_id"
          @click="goDetail(item.order_id)"
        >
          <image
            :src="$util.img(goods.sku_image)"
            mode="aspectFill"
            class="img"
            :lazy-load="true"
          ></image>
          <view class="flex-1" style="width: 60%">
            <view class="ellipsis-2 font-30 text-bold name m-b-20">{{
              goods.sku_name
            }}</view>
            <view class="flex-between m-t-20">
              <view class="c-8d">¥{{ goods.price }} x{{ goods.num }}</view>
            </view>
          </view>
        </view>
        <view class="c-60 flex-x-end m-b-20" @click="goDetail(item.order_id)">
          实付款
          <view class="c-origin text-bold font-26 flex-y-baseline"
            ><text class="font-24">￥</text>{{ item.pay_money }}</view
          >
        </view>
        <view class="flex-between">
          <view class="orderBtn m-l-auto">
            <block v-if="item.order_status == 0">
              <view
                class="btn_border btn"
                @click.stop="cancelOrder(item.order_id, index, 'list')"
                >取消订单</view
              >
              <view
                class="btn"
                @click.stop="payOrder(item.out_trade_no, 'list')"
                >立即付款</view
              >
            </block>
            <block v-else-if="item.order_status == 1">
              <block v-if="item.promotion_type !== 'pintuan'">
                <view class="btn" @click.stop="goDetail(item.order_id)"
                  >查看详情</view
                >
              </block>
              <block v-else>
                <block v-if="item.promotion_status_name == '拼团中'">
                  <view
                    class="color-title2"
                    style="margin-right: 320rpx"
                    v-if="item.group_info"
                    >当前人数{{ item.group_info.pintuan_count }}/{{
                      item.group_info.pintuan_num
                    }}</view
                  >
                  <view
                    class="btn btn_border_on"
                    @click="toshare(item.group_info.pintuan_id)"
                    >邀请好友</view
                  >
                </block>
              </block>
            </block>
            <block v-else-if="item.order_status == 3 || item.order_status == 2">
              <view
                class="btn"
                @click.stop="goDetail(item.order_id)"
                v-if="item.order_status == 2"
                >查看详情</view
              >
              <block v-if="item.delivery_type !== 'store'">
                <view
                  class="btn_border_on btn"
                  @click.stop="logisticsInfo(item.order_id)"
                  >查看物流</view
                >
              </block>
              <view
                class="btn"
                @click.stop="confirmReceipt(item.order_id, 'list')"
                >确认收货</view
              >
            </block>
            <block v-else>
              <view
                class="btn_border_on btn"
                @click.stop="logisticsInfo(item.order_id)"
                v-if="
                  item.order_status !== -1 && item.delivery_type !== 'store'
                "
                >查看物流</view
              >
              <view class="btn" @click.stop="goDetail(item.order_id)"
                >查看详情</view
              >
            </block>
          </view>
        </view>
      </view>
      <view
        class="order boxPanel"
        v-for="(item, index) in orderList"
        :key="index"
        v-if="statusIndex == 4"
      >
        <view
          class="head flex-x-between"
          @click="refundDetail(item.order_goods_id)"
        >
          <view class="c-60">{{ item.order_no }}</view>
          <view class="color-title2" v-if="item.refund_status == 3"
            >退款成功</view
          >
          <view class="" style="color: #fe6a00" v-if="item.refund_status == 1"
            >退款中</view
          >
          <view class="c-8d" v-if="item.refund_status == -1">退款失败</view>
        </view>
        <view class="order_info" @click="refundDetail(item.order_goods_id)">
          <image
            :src="$util.img(item.sku_image, { size: 'mid' })"
            mode="aspectFill"
            class="img"
            :lazy-load="true"
          ></image>
          <view class="flex-1" style="width: 60%">
            <view class="ellipsis-2 font-30 text-bold name m-b-20">{{
              item.sku_name
            }}</view>
            <view class="flex-between m-t-20">
              <view class="c-8d">¥{{ item.price }} x{{ item.num }}</view>
            </view>
          </view>
        </view>
        <view
          class="c-60 flex-x-end m-b-20"
          @click="refundDetail(item.order_goods_id)"
        >
          退款
          <view class="c-origin text-bold font-26 flex-y-baseline"
            ><text class="font-24">￥</text
            >{{
              item.refund_status == 3
                ? item.refund_real_money
                : item.refund_apply_money
            }}</view
          >
        </view>
        <view class="flex-between">
          <view class="orderBtn m-l-auto">
            <view class="btn" @click.stop="refundDetail(item.order_goods_id)"
              >查看详情</view
            >
            <block v-if="item.refund_action.length">
              <view
                class="btn_border btn"
                v-for="(actionItem, actionIndex) in item.refund_action"
                :key="actionIndex"
                v-if="actionItem.event == 'orderRefundCancel'"
                @click.stop="refundDetail(item.order_goods_id)"
                >取消售后</view
              >
            </block>
          </view>
        </view>
      </view>
    </scroll-view>

    <emptyData
      :width="empty.width"
      :height="empty.height"
      :text="empty.text"
      :icon="empty.icon"
      :marginTop="empty.marginTop"
      v-if="orderList.length == 0"
    ></emptyData>

    <!-- 引入支付弹窗 -->
    <!-- <pay :show="showPay" @close="showPay = false" :orderNo="order_id" :storeMoney="storeMoney" :money="total_pay_money" @goPay="goPay" v-if="showPay"></pay> -->
  </view>
</template>

<script>
// 待支付0   待发货1 已发货3 已收货4 已结算完成 10   已关闭-1
import pay from "../../components/pay/pay.vue";
import orderUtils from "../js/orderUtils.js";
export default {
  components: {
    pay,
  },
  data() {
    return {
      empty: {
        width: 135,
        height: 134,
        text: "暂无数据",
        icon: "/image/emptyAddress.png",
        marginTop: 100,
      },
      // 订单状态
      statusIndex: 0,
      statusList: [
        {
          name: "全部",
          status: "all",
        },
        {
          name: "待付款",
          status: "waitpay",
        },
        {
          name: "待发货",
          status: "waitsend",
        },
        {
          name: "待收货/提货",
          status: "waitconfirm",
        },
        {
          name: "售后单",
          status: "refund",
        },
      ],
      orderList: [], // 用于存储订单列表数据
      page: 1, // 当前页码
      //支付弹窗数据
      showPay: false,
      total_pay_money: 0,
      payment_method: "",
      order_id: "",
      storeMoney: 0,
    };
  },
  mixins: [orderUtils],
  onShow() {
    if (uni.getStorageSync("token")) {
      this.page = 1; // 重置页码为第一页
      this.fetchOrders();
    }
  },
  methods: {
    toshare(id) {
      this.$util.redirectTo("/otherpages/mall/tuanShare", {
        id: id,
      });
    },
    loadMoreOrders() {
      this.page++;
      this.fetchOrders(); // 加载更多订单
    },
    logisticsInfo(order_id) {
      this.$util.redirectTo("/pages/logistics/logistics?order_id=" + order_id);
    },
    goDetail(order_id) {
      this.$util.redirectTo(
        "/pages/mallOrderDetail/mallOrderDetail?order_id=" + order_id
      );
    },
    refundDetail(order_goods_id) {
      this.$util.redirectTo("/pages/refundOrderDetail/refundOrderDetail", {
        order_goods_id,
      });
    },
    ontabtap(e) {
      this.statusIndex = e.index;
      this.page = 1; // 重置页码为第一页
      this.fetchOrders(); // 刷新订单列表数据
    },
    fetchOrders() {
      uni.showLoading({
        title: "加载中...",
      });

      let url = "/api/order/lists";
      let data = {};
      if (this.statusIndex == 4) {
        url = "/api/orderrefund/lists";
        data = {
          page: this.page,
          page_size: 20,
        };
      } else {
        data = {
          order_status: this.statusList[this.statusIndex].status,
          page: this.page,
          page_size: 20,
        };
      }

      this.$api.sendRequest({
        url: url,
        data: data,
        success: (res) => {
          if (res.code == 0) {
            uni.hideLoading();

            if (this.page == 1) this.orderList = [];
            this.orderList = [...this.orderList, ...res.data.list];
          } else {
            uni.hideLoading();
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.order-list {
  flex: 1;
  overflow-y: auto; /* 允许垂直滚动 */
}
// 全局统一顶部背景色
.indexbg {
  position: absolute;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 360rpx;
}
// 切换tab栏目-与首页顶上一样
.tabs {
  display: flex;
  margin-left: 24rpx;
  height: 90rpx;
  .tabsitem {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #788096;
    margin-right: 24rpx;
    image {
      position: absolute;
      top: 76rpx;
      right: 52rpx;
      width: 41rpx;
      height: 15rpx;
    }
  }
  .active {
    font-weight: bold;
    font-size: 36rpx !important;
    color: #1c274c !important;
  }
}
.tabs2 {
  display: flex;
  margin: 30rpx 24rpx 20rpx;
  .tabsitem {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20rpx;
    width: 180rpx;
    height: 66rpx;
    border: 1px solid #e4e5e9;
    color: #5d657f;
    margin-right: 20rpx;
  }
  .active {
    color: #fff !important;
    font-weight: bold;
    background-color: $color-title2 !important;
  }
}
.search {
  padding: 11rpx 20rpx;
  width: 244rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  border: 1px solid #e4e5e9;
  margin-left: auto;
  image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }
}

.order {
  margin: 0 24rpx 24rpx;
  padding: 20rpx;
  .head {
    padding-bottom: 20rpx;
    border-bottom: 1px solid rgba(28, 39, 76, 0.1);
    margin-bottom: 20rpx;
  }
  &_info {
    display: flex;
    // padding-bottom: 30rpx;
    // border-bottom: 1px solid #EDEEF2;
    margin-bottom: 30rpx;
    .name {
      height: 78rpx;
      line-height: 1.4;
    }
    .img {
      width: 180rpx;
      height: 180rpx;
      border-radius: 20rpx;
      margin-right: 20rpx;
    }
  }
  .pin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f7f7f5;
    border-radius: 20rpx;
    padding: 20rpx 30rpx;
    margin-bottom: 30rpx;
  }
  .orderBtn {
    display: flex;
    .btn {
      padding: 0 24rpx;
      height: 52rpx;
      line-height: 52rpx;
      border-radius: 30rpx;
      text-align: center;
      font-size: 24rpx;
      background-color: $color-title2;
      color: #fff;
      margin-left: 20rpx;
      box-sizing: border-box;
    }
    .btn_border {
      color: #788096 !important;
      border: 1px solid #788096 !important;
      background-color: #fff !important;
    }
    .btn_border_on {
      color: $color-title2 !important;
      border: 1px solid $color-title2 !important;
      background-color: #fff !important;
    }
  }
}

.order-foods {
  display: flex;
  align-items: center;

  .scroll-x {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 76%;

    image {
      display: inline-block;
      width: 146rpx;
      height: 146rpx;
      border-radius: 20rpx;
      margin-right: 20rpx;
    }
  }
}
</style>
